<template>
	<uni-popup ref="popup" type="center">
		<view class="popup-box">
			<view class="icon">
					<uni-icons @click="show=false" type="close" size="35" color="#fff"></uni-icons>
			</view>
			<view class="title">{{props.title}}</view>
			<div class="content">
				<slot></slot>
			</div>
			<Mbuttom @click="onConfirm" style="margin-top: 20px;">{{props.confirmText}}</Mbuttom>
			<view v-if="props.showRefuse" @click="show=false" class="refuse">
				不同意
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref, watchEffect
	} from 'vue';
	import Mbuttom from './Mbuttom.vue';
	
	const show = defineModel({type:Boolean})
	const popup = ref({})
	watchEffect(() => {
		if(show.value){
			popup.value.open()
		}else{
			popup.value.close&&popup.value.close()
		}
	})
	
	const props = defineProps({
		title:String,
		confirmText:String,
		showRefuse: Boolean,
	})
	const emits = defineEmits(['confirm'])
	function onConfirm(){
		show.value = false
		emits('confirm')
	}
</script>

<style lang="scss">
	.popup-box {
		background-color: #fff;
		width: 90vw;
		padding: 20px;
		border-radius: 20px;
		box-sizing: border-box;
		position: relative;
		.icon{
			font-weight: normal;
			position: absolute;
			right: 0;
			top: 0;
			transform: translateY(-110%);
		}

		.content {
			font-size: 32rpx;
			color: #3D3D3D;

		}
	}

	.refuse {
		color: #A2A2A2;
		font-size: 24rpx;
		text-align: center;
		margin-top: 10px;
	}

	.title {
		color: #333;
		font-size: 40rpx;
		font-weight: 500;
		text-align: center;
		padding-bottom: 20px;
	}
</style>